<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>a integrate case for char SDK</title>
        <link href="../qschart/mstar_qs_chart_1.4.css" type="text/css" rel="stylesheet"/>
		<link href="../theme/default/style.css" type="text/css" rel="stylesheet"/>
 
		<style>
		.sdk-chart-out-container{width:800px}
		.sdk-chart-panel{height:120px; display:none;background-color:#FFFFFF;border-style: none solid solid;border-width: medium 1px 1px;border-color:#666666 #333333 #999999;}
		.sdk-chart-section{float:left;width:100px;margin: 6px 5px 0;}
		.sdk-chart-type,.sdk-chart-fundamental,.sdk-chart-indicators{float:left;height:86px;overflow-x: hidden;overflow-y: scroll;}
		.sdk-chart-section-type {width:130px}
		.sdk-chart-section-axis {width:80px}
		.sdk-chart-section-fundamental{width:130px}
		.sdk-chart-section-indicator {width:240px}
		.sdk-chart-section-drawings {width:200px}
		.sdk-chart-section-compare{width:200px}
		.sdk-chart-range{ padding: 9px;}
		.sdk-chart-custom-date-container,.sdk-chart-freq-container, .sdk-chart-zoom-container{display:inline-block}
		.sdk-chart-freq-container {vertical-align: top;width: 80px}
		.sdk-chart-freq .rtq-ddl{margin:0}
		.sdk-chart-zoom-container a{display: inline-block;font-size: 10px; height: 18px;line-height: 18px;min-width: 29px;padding: 0 2px;text-align: center;
                                    text-decoration: none;vertical-align: top;background: url("//im.mstar.com/im/b_slice_off.gif") repeat scroll 0 0 transparent;border-color: #E1E1E1 #B9B9B9 #B9B9B9 #E1E1E1;color: #000000;}
		.sdk-chart-section-input-panel {display:none}
		.sdk-chart-zoom-container a.on{ background: url("//im.mstar.com/im/b_slice_on.gif") repeat scroll 0 0 transparent;border-color: #888888 #B9B9B9 #B9B9B9 #666666;}
		.sdk-chart-section-input-panel .rtc-win{left:0;top:0}
		.sdk-chart-section-input-panel {width:220px}
		.sdk-chart-section-input-panel .qs-ui-ipt{width:60px}
		.sdk-chart-section-input-panel .para-list,.sdk-chart-section-input-panel .action-row{float:left}
		.sdk-chart-section-input-panel .row-left{float:left;  margin: 1px 5px;width: 130px;}
		.sdk-chart-section-input-panel .row{margin: 1px 0}
		.sdk-chart-section-input-panel .action-row {margin-top:4px}
		.sdk-chart-section-input-panel .qs-ui-btn {margin-left:2px}
		</style>
    </head>
    <body style="overflow: auto; padding: 0; margin: 0">
		<script src="../lib/jquery.js" type="text/javascript"></script>
        <script src="../lib/jquery.json.min.js" type="text/javascript"></script>
        <script src="../lib/migratory-jslib.js" type="text/javascript"></script>
		<script src="../js/language/en_us/qs_chart_en_us.js" type="text/javascript"></script>
		<script src="../js/formatter/qs_formatter_en_us.js" type="text/javascript"></script>
        <script src="../qschart/mstar_qs_chart_1.4.js" type="text/javascript"></script>
     <div class="sdk-chart-out-container">
	 <div class="sdk-chart-tool">
	 </div>
	 <div class="sdk-chart-panel sdk-chart-panel-display">
		 <div class="sdk-chart-section">
			 <div class="text"><h4>Chart Cursor</h4></div>
			 <div class="sdk-chart-cursor">
			 </div>
		 </div>
		 <div class="sdk-chart-section sdk-chart-section-type">
			 <div class="text"><h4>Chart Type</h4></div>
			 <div class="sdk-chart-type">
			 </div>
		 </div>
		 <div class="sdk-chart-section sdk-chart-section-axis">
			 <div class="text"><h4>Y-axis</h4></div>
			 <div class="sdk-chart-axis">
			 </div>
		 </div>
		 <div class="sdk-chart-section">
			 <div class="text"><h4>Vertical Scale</h4></div>
			 <div class="sdk-chart-scale">
			 </div>
		 </div>
		 <div class="sdk-chart-section">
			 <div class="text"><h4>Selection Mode</h4></div>
			 <div class="sdk-chart-selection">
			 </div>
		 </div>
	 </div>
	 <div class="sdk-chart-panel sdk-chart-panel-compare">
		<div class="sdk-chart-section sdk-chart-section-compare">
			<div class="text"><h4>Compare</h4></div>
			<div class="sdk-chart-compare">
				<input id = "sdk-chart-autobox" class="qs-ui-ipt">
				<a href="javascript:void(0)" value="auto" class="qs-ui-btn go">Add</a>
			</div>
		</div>
	 </div>
	 <div class="sdk-chart-panel sdk-chart-panel-indicators">
		<div class="sdk-chart-section">
			<div class="text"><h4>Events</h4></div>
			<div class="sdk-chart-events">
			</div>
		</div>
		<div class="sdk-chart-section sdk-chart-section-indicator">
			<div class="text"><h4>Indicators</h4></div>
			<div class="sdk-chart-indicators">
			</div>
		</div>
		<div class="sdk-chart-section sdk-chart-section-input-panel">
			<div class="text">
				<h4></h4>
			</div>
			<div class="para-list"></div>
			<div class="action-row">
				<a  href="javascript:void(0);" class = "qs-ui-btn add" value="draw">Add</a>
				<a href="javascript:void(0);" class = "qs-ui-btn canel" value="cancel">Canel</a>
				<a href="javascript:void(0);" class = "qs-ui-btn remove" value="remove">Remove</a>
			</div>
		</div>
	 </div>
	 <div class="sdk-chart-panel sdk-chart-panel-fundamental">
		<div class="sdk-chart-section sdk-chart-section-fundamental">
			<div class="text"><h4>Fundamental</h4></div>
			<div class="sdk-chart-fundamental">
			</div>
		</div>
	 </div>
	 <div class="sdk-chart-panel sdk-chart-panel-drawings">
		<div class="sdk-chart-section sdk-chart-section-drawings">
			<div class="text"><h4>Drawings</h4></div>
			<div class="sdk-chart-drawings">
			</div>
		</div>
	 </div>
	 <div class="sdk-chart-range">
		<div class="sdk-chart-custom-date-container">
		<input type="text" class="qs-ui-ipt" style="width: 80px;">
		<span>-</span>
		<input type="text" class="qs-ui-ipt" style="width: 80px;">
		</div>
		<div class="sdk-chart-freq-container">
			<div class="sdk-chart-freq" style="width: 76px; z-index: 90;">
			</div>
		</div>
		<div class="sdk-chart-zoom-container">
			<a href="javascript:void(0);" value="1" class="on">1 D</a>
			<a href="javascript:void(0);" value="2">5 D</a>
			<a href="javascript:void(0);" value="3">1 Mth</a>
			<a href="javascript:void(0);" value="4">3 Mth</a>
			<a href="javascript:void(0);" value="5">YTD</a>
			<a href="javascript:void(0);" value="6">1 Yr</a>
			<a href="javascript:void(0);" value="7">3 Yr</a>
			<a href="javascript:void(0);" value="8">5 Yr</a>
			<a href="javascript:void(0);" value="9">10 Yr</a>
			<a href="javascript:void(0);" value="10">Max</a>
			<a href="javascript:void(0);" value="export">Export data to Excel</a>
		</div>
	 </div>
	 <div class="sdk-chart-container" id = "sdk-chart"></div>
	 </div>
	 <script>
	    $(".sdk-chart-panel-display").show();
		var toolEl = $(".sdk-chart-tool")[0];  // initilaze the tab menus.
		var toolTabMenu = new Util.TabMenu(toolEl,[{
			txt:"Display",
			id:"display",
			closable:false
		},{
			txt:"Compare",
			id:"compare",
			closable:false
		},{
			txt:"Indicators",
			id:"indicators",
			closable:false
		},{
			txt:"Fundamental",
			id:"fundamental",
			closable:false
		},{
			txt:"Drawings",
			id:"drawings",
			closable:false
		}],{
			onActive: function(tab){
				$(".sdk-chart-panel").hide();
				$(".sdk-chart-panel-"+tab.id).show();
				if(tab.id=="compare"&&!GB_qsAutoCompleteBox.subscriptions["sdk-chart-autobox"]){
					GB_qsAutoCompleteBox.subscription("sdk-chart-autobox", function(data, v3){
						chartWidget.addCompairTickers(data);
					}, {
						showAdvance: false,
						needClear: true
					});
				}
			}
        },{ width:80,
           isExcuteCallbackAtInit:false,
		   closeAction:'hide'
        });
		
		var cursorEl = $(".sdk-chart-cursor");
		var cursorRatioGroup = new Util.ButtonGroup(cursorEl,[{
			txt:"Track Ball",
			val:"0"
		},{
			txt:"Crosshair",
			val:"1",
			checked:true
		},{
			txt:"Off",
			val:"3"
		}],{
		   onClick:function(v){  // change the cursor type.
				chartWidget.setCursorType(v);
		   }
		},{
			type: 'radio',
			inverse:false,
			vertical: true
		});
		var typeEl = $(".sdk-chart-type");
		var typeRatioGroup = new Util.ButtonGroup(typeEl,[{
			txt:"Mountain",
			val:"mountain",
			checked:true
		},{
			txt:"Line",
			val:"line"
		},{
			txt:"Dot",
			val:"dot"
		},{
			txt:"Above/Below",
			val:"ab"
		},{
			txt:"OHLC",
			val:"ohlc"
		},{
			txt:"HLC",
			val:"hlc"
		},{
			txt:"Candlestick",
			val:"candle"
		},{
			txt:"%Growth",
			val:"growth"
		},{
			txt:"10K Growth",
			val:"growth10"
		},{
			txt:"Dividend Effect",
			val:"dEffect"
		}],{
		   onClick:function(v){   // change the chart type;
			   chartWidget.setChartType(v);
		   }
		},{
			type: 'radio',
			inverse:false,
			vertical: true
		});
		
		var axisEl = $(".sdk-chart-axis");
		var axisRatioGroup = new Util.ButtonGroup(axisEl,[{
			txt:"Left",
			val:"left"
		},{
			txt:"Right",
			val:"right",
			checked:true
		}],{
		   onClick:function(v){
			   chartWidget.setYaxisAlign(v);
		   }
		},{
			type: 'radio',
			inverse:false,
			vertical: true
		});
		var scaleEl = $(".sdk-chart-scale");
		var scaleRatioGroup = new Util.ButtonGroup(scaleEl,[{
			txt:"Linear",
			val:"0",
			checked:true
		},{
			txt:"Logarithmic",
			val:"1"
		}],{
		   onClick:function(v){
			   chartWidget.switchScaleType(v);
		   }
		},{
			type: 'radio',
			inverse:false,
			vertical: true
		});
		
		var selectionEl = $(".sdk-chart-selection");
		var selectionRatioGroup = new Util.ButtonGroup(selectionEl,[{
			txt:"Pan",
			val:"pan",
			checked:true
		},{
			txt:"Zoom In",
			val:"zoomin"
		}],{
		   onClick:function(v){
				chartWidget.setSelectionMode(v);
		   }
		},{
			type: 'radio',
			inverse:false,
			vertical: true
		});
		
		var eventsEl = $(".sdk-chart-events");
		var eventsRatioGroup = new Util.ButtonGroup(eventsEl,[{
			txt:"Dividend",
			val:"dividend"
		},{
			txt:"Splits",
			val:"splits"
		},{
			txt:"Earnings",
			val:"earnings"
		}],{
		   onClick:function(v,item){
			  chartWidget.switchEvents(v,item.isSelected);
		   }
		},{
			type: 'checkbox',
			vertical: true
		});
		
		var indicatorInputPanelEl = $(".sdk-chart-section-input-panel");
		var showIndicatorParaPanel = function(value){   // display the panel for input of indicator.
			var indicatorList = chartWidget.indicatorUI;
			indicatorInputPanelEl.find(".text H4").html(indicatorList[value].title);
			indicatorInputPanelEl.attr("value",value);
			var str = "",idr = indicatorList[value];
			for (var i = 0; i < idr.parameter.length; i++) {
				str += '<div class="row"><div class="row-left"><span>' + idr.parameter[i] + '</span></div><input type="text" class="qs-ui-ipt"  value="' + (typeof(idr.defaultValue[i]) == "undefined" ? "" : idr.defaultValue[i]) + '" ></div>';
			}
			indicatorInputPanelEl.find(".para-list").html(str);
			indicatorInputPanelEl.show();
		};
		indicatorInputPanelEl.find(".action-row a").unbind("click").bind("click",function(e){  // bind the events
			var v = $(e.target).attr("value");
			var indicatorKey = indicatorInputPanelEl.attr("value");
			if(v=="draw"){ // add a indicator.
				var ipts = indicatorInputPanelEl.find(".para-list input"), args = [];
				args[0] = indicatorKey;
				for (var i = 0; i < ipts.length; i++) {
					args.push(ipts[i].value);
				}
				chartWidget.addIndicators.apply(chartWidget, args);
			}else if(v=="remove"){ // remove a indicator
				if (indicatorKey != null) {
					chartWidget.removeIndicators(indicatorKey);
					indicatorInputPanelEl.hide();
				}
			}else if(v=="cancel"){  // cancel the indicator.
				indicatorKey = null;
			}
			indicatorInputPanelEl.hide();
		});
		
		var indicatorsEl = $(".sdk-chart-indicators");
		var indicatorsRatioGroup = new Util.ButtonGroup(indicatorsEl,[{
			txt:"Simple Moving Average (SMA)",
			val:"SMA"
		},{
			txt:"Exponential Moving Average (EMA)",
			val:"EMA"
		},{
			txt:"Volume SMA",
			val:"SMAV"
		},{
			txt:"Bollinger Bands (BBands)",
			val:"BBands"
		},{
			txt:"Parabolic SAR (PSAR)",
			val:"PSAR"
		},{
			txt:"MACD",
			val:"MACD"
		},{
			txt:"Relative Strength Index (RSI)",
			val:"RSI"
		},{
			txt:"Rate of Change (ROC) ",
			val:"ROC"
		},{
			txt:"Williams %R",
			val:"WillR"
		},{
			txt:"Slow Stochastic",
			val:"SStochastic"
		},{
			txt:"Fast Stochastic",
			val:"FStochastic"
		},{
			txt:"Price Channel",
			val:"PChannel"
		},{
			txt:"MA Envelope",
			val:"MAE"
		},{
			txt:"Momentum",
			val:"Momentum"
		},{
			txt:"Ultimate (ULT) Oscillator",
			val:"ULT"
		},{
			txt:"Directional Moving Index (DMI)",
			val:"DMI"
		},{
			txt:"Money Flow Index",
			val:"MFI"
		},{
			txt:"On Balance Volume",
			val:"OBV"
		},{
			txt:"Volume Accumulation",
			val:"VAcc"
		},{
			txt:"Up/Down Ratio",
			val:"UDRatio"
		},{
			txt:"Volume By Price",
			val:"VBP"
		},{
			txt:"Volume",
			val:"Volume"
		},{
			txt:"Volume+",
			val:"VPlus"
		},{
			txt:"Fast Volatility",
			val:"FVolatility"
		},{
			txt:"Weighted Moving Average",
			val:"WMA"
		},{
			txt:"Accumulation/Distribution",
			val:"AccDis"
		},{
			txt:"Mass Index",
			val:"Mass"
		},{
			txt:"Volatility",
			val:"Volatility"
		},{
			txt:"Force Index",
			val:"ForceIndex"
		},{
			txt:"Average True Range",
			val:"ATR"
		},{
			txt:"Keltner Index",
			val:"Keltner"
		},{
			txt:"Previous Close Line",
			val:"PrevClose"
		},],{
		   onClick:function(value,item){
				var d =chartWidget.indicatorUI;
				if(d[value]&&d[value].parameter&&d[value].parameter.length){// need input parameters.
					if(item.isSelected)item.inverse();
					else item.select();
					showIndicatorParaPanel(value);
				}else{
					if(!item.isSelected){  // remove the indicator
						chartWidget.removeIndicators(value);
					}else{
						chartWidget.addIndicators(value);
						//if(value=="Volume"){
						//	elm.indicatorsPanel.find("a[value='VPlus']").removeClass("qs-urlchart-item-on");
						//}else if(value=="VPlus"){
						//	elm.indicatorsPanel.find("a[value='Volume']").removeClass("qs-urlchart-item-on");
						//}
					}
					
				}
		   }
		},{
			type: 'checkbox',
			inverse:true,
			vertical: true
		});
		
		var fundamentalEl = $(".sdk-chart-fundamental");
		var fundamentalRatioGroup = new Util.ButtonGroup(fundamentalEl,[{
			txt:"Price/Earnings",
			val:"PE"
		},{
			txt:"Price/Sales",
			val:"PS"
		},{
			txt:"Price/Book",
			val:"PB"
		},{
			txt:"Price/Cash",
			val:"PC"
		},{
			txt:"Fair Value",
			val:"FairValue"
		},{
			txt: "Rolling Dividend",
			val: "RDividend"
		},{
			txt: "Dividend Yield",
			val: "DYield"
		},{
			txt: "Rolling EPS",
			val: "REPS"
		},{
			txt: "% Short Int.",
			val: "SInterest"
		}],{
		   onClick:function(v,item){
			 if(item.isSelected) chartWidget.addValuations(v);
			 else chartWidget.removeValuations(v);
		   }
		},{
			type: 'checkbox',
			inverse:true,
			vertical: true
		});
		
		var drawingsEl = $(".sdk-chart-drawings");
		var drawingsRatioGroup = new Util.ButtonGroup(drawingsEl,[{
			txt:"Trend Line",
			val:"trendline"
		},{
			txt:"Rectangle",
			val:"rectangle"
		},{ 
			txt:"Ellipse",
			val:"ellipse"
		},{ 
			txt:"Level Line",
			val:"levelline"
		},{ 
			txt:"Fibonacci Retracement Levels",
			val:"fibonacci"
		}],{
		   onClick:function(v,item){
				if(item.isSelected)chartWidget.beginDrawing(v);  // drawing is ready.
				else chartWidget.cancelDrawing(v);
		   }
		},{
			type: 'radio',
			inverse:true,
			vertical: true
		});
		
		var freqEl = $(".sdk-chart-freq");
		var ddlFrequency = new Util.DropDownList(freqEl[0], function(k, v){
              chartWidget.setFrequency(v);     //self.chartComponent.frequencySelected(k, v);
		},[{
			txt:"1 min",
			val:"minute"
		},{
			txt:"5 mins",
			val:"minute5"
		},{
			txt:"10 mins",
			val:"minute10"
		},{
			txt:"15 mins",
			val:"minute15"
		},{
			txt:"30 mins",
			val:"minute30"
		}], {
			triggerByClick: false,
			width: 76,
			disable: false,
			actionAtInit: false
		});
		 
		 // initilaze the chart 
        var prefix = "//qsstage.morningstar.com/"
        GB_ChartDataManager.dataUrls.intraday = prefix+"quote.jsp?";
        GB_ChartDataManager.dataUrls.historical = prefix+"getStockHistoricalData.jsp?";
        GB_ChartDataManager.dataUrls.fundamental = prefix+"getFundamentalData.jsp?";
        GB_ChartDataManager.dataUrls.minutelyIntraday = prefix+"getMinutelyIntradayData.jsp?";
		GB_ChartDataManager.dataUrls.fundHistorical=prefix+"getFundChartData.jsp?";
		GB_ChartDataManager.dataUrls.exportDataToExcel=prefix+"exportChartDataToExcel.jsp?";
        GB_ChartDataManager.dataUrls.forex = prefix+"getForexHistoricalData.jsp?";
		GB_ChartDataManager.crossDomain = true;
		
        GB_autoCompleteBoxDataManager.dataUrls = prefix+"acb.jsp";
		GB_autoCompleteBoxDataManager.isCrossDomain = true;
        GB_autoCompleteBoxDataManager.noCheckPermission = true;
        GB_qsAutoCompleteBox.hideAdvacedSearch();// hide the advance search link.
		var chartWidget = new RTChartComponent("MSFT", "USA", "en_us");
        chartWidget.id = "sdk-chart";
		
		
		
		
		
		chartWidget._elements.$customDate = $(".sdk-chart-custom-date-container")  // create custom date boxes.
			var self = this;
			chartWidget.uiComponents.customDateB = new RTQ_chartCustomDataBox(chartWidget._elements.$customDate,{
				startDate:chartWidget.startDate,
				endDate:chartWidget.endDate,
				width:80,
				splitLabel:"-",
				callback:function(s,e){
					chartWidget.startDate = s, chartWidget.endDate = e;
					chartWidget._clearZoomIn(); 
					chartWidget.changeRange(11);
				},
				bindEvent:true
			});
			
        chartWidget.initUIConfig({
			pCtrl1: null,
			pCtrl2: null,
			Chart: {
				showPChart: true,
				showVChart: true,
				showLegend: true,
				showTimeSlider: true
			 },
			vCtrl:null,
			autoHeight: true,
			RightMenu:false});
			
		// create autocomplete for compare
		//$("#sdk-chart-autobox").show();
		
		//$("#sdk-chart-autobox").hide();
		//after callbacks
		chartWidget.afterCreateUI = function(){
			chartWidget.uiComponents.ddlFrequency = ddlFrequency;  // set the frequency dropdown list to chart's frequency dropdown list
			chartWidget.UIConfig.pCtrl1 = {showFrequency: true};
		}
		chartWidget.Init("sdk-chart", "", {width:800,height:360});
		
		//chartWidget._elements.indicatorWinElm.appendTo(".sdk-chart-section-input-panel");
		// bind interfaces to event of UI.
		
		$(".sdk-chart-zoom-container a").unbind("click").bind("click",function(e){  // range buttons
			var t = $(e.target), range = t.attr("value");
				//scfg.zoomRange = range;
				if(range=="export"){  // export data to excel.
					chartWidget.exportDataToExcel();
				}else{
					chartWidget.changeRange(range);
					$(".sdk-chart-zoom-container a").removeClass("on");
					$(".sdk-chart-zoom-container").find("a[value=" + range + "]").addClass("on");
				}	
		})
		
		// after callbacks they are trigged after finishing some opaerate.
		chartWidget.afterDrawEnd = function(drawType){  // end of
			drawingsRatioGroup.btns[drawType].inverse();
		};
		chartWidget.afterAddIndicators = function(data){
			if(indicatorsRatioGroup.btns&&indicatorsRatioGroup.btns[data.indicatorName]){
				indicatorsRatioGroup.btns[data.indicatorName].select();
			}
		}
		chartWidget.afterRemoveIndicators = function(data){
			if(indicatorsRatioGroup.btns&&indicatorsRatioGroup.btns[data.indicatorName]&&indicatorsRatioGroup.btns[data.indicatorName].isSelected){
				indicatorsRatioGroup.btns[data.indicatorName].inverse();
			}
		}
		chartWidget.afterRemoveVolumeChart = function(){ // remove volume chart.
			if(indicatorsRatioGroup.btns){  // unselect the volume, volume plus and smvv indicators.
				if(indicatorsRatioGroup.btns["Volume"])indicatorsRatioGroup.btns["Volume"].inverse();
				if(indicatorsRatioGroup.btns["VPlus"])indicatorsRatioGroup.btns["VPlus"].inverse();
				if(indicatorsRatioGroup.btns["SMVV"])indicatorsRatioGroup.btns["SMVV"].inverse();
			}
		}
		chartWidget.datePeriodChanged = function(data){ // when the date range changed.
			if(data.zoomRange==11){  // after customize date.
				$(".sdk-chart-zoom-container a").removeClass("on");
			}
		}
	 </script>
            
    </body>
</html>
